<template>
  <div class="c-bg-sgray">
    <div class="c-bg-mb1-orange c-ph32 c-pt60 c-pb64 c-fs48 c-fc-white">
      {{childName}}
    </div>
    <div class="c-bg-white  c-pv32 c-flex-row">
      <div class="c-w33 c-bd-r1-mgray c-textAlign-c">
        <div class="c-fs20 c-fc-gray">累计收入</div>
        <div class="c-pv16 c-fs30 c-fc-xblack">{{(allMoney*1.0).toFixed(2)}}</div>
      </div>
      <div class="c-w34 c-bd-r1-mgray c-textAlign-c">
        <div class="c-fs20 c-fc-gray">今日收入</div>
        <div class="c-pv16 c-fs30 c-fc-xblack">{{(todayMoney * 1.0).toFixed(2)}}</div>
      </div>
      <div class="c-w33 c-textAlign-c">
        <div class="c-fs20 c-fc-gray">本月收入</div>
        <div class="c-pv16 c-fs30 c-fc-xblack">{{(monthMoney * 1.0 ).toFixed(2)}}</div>
      </div>
    </div>
    <div class="c-hh60 c-flex-row c-justify-sa c-fs24 c-bg-white c-mt10 c-bd-b1">
      <div @click='clickChangeTab(0)' class="c-hh60 c-flex-row c-flex-center" :class="tabIndex == 0 ? 'color-orange border-bottom2':''">累计</div>
      <div @click='clickChangeTab(1)' class="c-hh60 c-flex-row c-flex-center" :class="tabIndex == 1 ? 'color-orange border-bottom2':''">今日</div>
      <div @click='clickChangeTab(2)' class="c-hh60 c-flex-row c-flex-center" :class="tabIndex == 2 ? 'color-orange border-bottom2':''">本月</div>
    </div>
    <div class="c-bg-white  c-pt40 c-pb20 c-flex-row">
      <div class="c-w33 c-textAlign-c">
        <div class="c-fs20 c-fc-gray">课程成交量</div>
        <div class="c-pv20 c-fs30 c-fc-xblack">{{(curData.courseCount*1.0)}}</div>
      </div>
      <div class="c-w34 c-textAlign-c">
        <div class="c-fs20 c-fc-gray">合伙人成交量</div>
        <div class="c-pv20 c-fs30 c-fc-xblack">{{(curData.partnerCount * 1.0)}}</div>
      </div>
      <div class="c-w33 c-textAlign-c">
        <div class="c-fs20 c-fc-gray">战略合伙人成交量</div>
        <div class="c-pv20 c-fs30 c-fc-xblack">{{(curData.superPartnerCount * 1.0 )}}</div>
      </div>
    </div>
    <div class="c-bg-white c-pb20 c-flex-row">
      <div class="c-w33 c-textAlign-c">
        <div class="c-fs20 c-fc-gray">课程推荐量</div>
        <div class="c-pv20 c-fs30 c-fc-xblack">{{(curData.referCourseCount*1.0)}}</div>
      </div>
      <div class="c-w34 c-textAlign-c">
        <div class="c-fs20 c-fc-gray">合伙人推荐量</div>
        <div class="c-pv20 c-fs30 c-fc-xblack">{{(curData.referPartnerCount * 1.0)}}</div>
      </div>
      <div class="c-w33 c-textAlign-c">
        <div class="c-fs20 c-fc-gray">战略合伙人推荐量</div>
        <div class="c-pv20 c-fs30 c-fc-xblack">{{(curData.referSuperPartnerCount * 1.0 )}}</div>
      </div>
    </div>
    <template v-if="userType != 1">
      <div class="c-pv20 c-bd-b1 c-fs24 c-bg-white c-ph24 c-mt10">推荐记录</div>
      <com-recommend :dataList="dataList" :dataStatus="dataStatus" :isChild="true"></com-recommend>
    </template>
  </div>
</template>

<script>
import ComRecommend from './comRecommend.vue'
import { utilJs } from "@/utils/common.js";
const LIMIT = 20;
let pageIndex = 1;
let allDataInfo = {};
let todayDataInfo = {};
let monthDataInfo = {};
export default {
  name: 'ChildFormIndex',
  components: {
    ComRecommend,
  },
  data() {
    return {
      tabIndex: 0,
      allMoney: 0,
      todayMoney: 0,
      monthMoney: 0,
      curData: {
        money: 0,
        courseCount: 0,
        partnerCount: 0,
        superPartnerCount: 0,
        referCourseCount: 0,
        referPartnerCount: 1,
        referSuperPartnerCount: 0
      },
      userType: 1,
      childName: '',
      dataList: [],
      dataStatus: "HAS_MORE_DATA", //显示加载更多LOAD_MORE 加载中 LOADING 没有更多 NO_MORE_DATA
    }
  },
  methods: {
    getRecodeList() {
      if (this.dataStatus == 'LOADING') {
        return;
      }
      this.dataStatus = 'LOADING';
      utilJs.getMethod(`${global.apiurl}declares/getTeamRefereeList?page=${pageIndex}&limit=${LIMIT}`, (res) => {
        if (pageIndex == 1) {
          this.dataList = res.data;
        } else {
          this.dataList = [...this.dataList, ...res.data];
        }
        if (res.data && (res.data.length < LIMIT)) {
          this.dataStatus = pageIndex == 1 && res.data.length == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
        } else {
          this.dataStatus = 'HAS_MORE_DATA';
          pageIndex++;
        }
      },
        failRes => {
          this.dataStatus = 'DATA_ERROR';
        }
      );
    },
    getFormInfo() {
      utilJs.getMethod(`${global.apiurl}declares/companyIncomes?type=${this.userType}`, (res) => {
        this.childName = res.name;
        allDataInfo = res.all;
        todayDataInfo = res.today;
        monthDataInfo = res.month;
        this.curData = res.all;
        this.allMoney = res.all.money;
        this.todayMoney = res.today.money;
        this.monthMoney = res.month.money;
      });
    },
    clickChangeTab(index) {
      this.tabIndex = index;
      switch (index) {
        case 0:
          this.curData = allDataInfo;
          break;
        case 1:
          this.curData = todayDataInfo;
          break;
        case 2:
          this.curData = monthDataInfo;
          break;
      }
    },
    //分享
    wechatShare() {
      utilJs.wechatConfig("", "", "", "", function () { });
    }
  },
  activated() {
    this.userType = this.$route.query.type || 1;
    this.dataList = [];
    this.dataStatus = 'HAS_MORE_DATA';
    pageIndex = 1;
    let docTitle = this.$route.query.type == 1 ? '运营中心收入' : '子机构收入';
    setDocumentTitle(docTitle);// eslint-disable-line
    if (this.userType != 1) {
      this.getRecodeList();
      window.addEventListener('scroll', this.windowScrollFunction);
    }
    this.getFormInfo();
    this.wechatShare();
  },
  deactivated() {
    this.dataStatus = 'NO_MORE_DATA';
    if (this.userType != 1) {
      window.removeEventListener('scroll', this.windowScrollFunction);
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.color-orange {
  color: #fc6e21;
}
.border-bottom2 {
  border-bottom: 1px solid #fc6e21;
}
</style>
